/*
点击 “提交”
  1 获取文本域的内容 类似 输入框的获取
    1 data中定义变量 表示 输入框内容
    2 文本域 绑定 输入事件 事件触发的时候 把输入框的值 存入到变量中
  2 对这些内容 合法性验证
  3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的链接
    1 遍历图片数组
    2 挨个上传
    3 自己再维护图片数组 存放 图片上传后的外网的链接
  4 文本域 和 外网的图片的路径 一起提交到服务器 前端的模拟 不会发送请求到后台。。。
  5 清空当前页面
  6 返回上一页
 */

import {request} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';

let timer = null;

Page({
    data: {
        tabs: [
            {
                id: 0,
                value: "体验问题",
                isActive: true
            },
            {
                id: 1,
                value: "商家、商品投诉",
                isActive: false
            },
        ],
        textVal: '',
        clear: false
    },
    //子组件返回的图片数组
    ChooseImgs: [],

    //外网的图片的路径数组
    UploadImgs: [],

    handleTabItemChange(e) {
        const {index} = e.detail;
        const {tabs} = this.data;
        const newTabs = tabs.map((item, i) => ({...item, isActive: i === index}));
        this.setData({tabs: newTabs});
    },

    handleGetImages(e) {
        const {images} = e.detail;
        this.ChooseImgs = images;
        this.setData({clear: false});
    },

    handleTextInput(e) {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(() => {
            this.setData({textVal: e.detail.value});
        }, 500);
    },

    handleFormSubmit() {
        const {textVal} = this.data;
        if (!textVal.trim()) {
            wx.showToast({title: '输入不合法', icon: 'none', mask: true});
            return;
        }

        if (!this.ChooseImgs.length) {
            console.log("只是提交了文本");
            wx.navigateBack({
                delta: 1
            });
            return;
        }

        wx.showLoading({
            title: "正在上传中",
            mask: true
        });
        //上传文件的api不支持多个文件同时上传 遍历数组 挨个上传
        this.ChooseImgs.forEach((item, index) => {
            wx.uploadFile({
                //图片要上传到哪里
                url: 'https://images.ac.cn/Home/Index/UploadAction/',
                //被上传文件的路径
                filePath: item,
                //上传的文件的名称 后台来获取文件 file
                name: 'file',
                //顺带的文本信息
                formData: {},
                success: (res) => {
                    let url = JSON.parse(res.data).url;
                    this.UploadImgs.push(url);
                    // 所有的图片都上传完毕了才触发
                    if (index === this.ChooseImgs.length - 1) {
                        wx.hideLoading();
                        console.log("把文本的内容和外网的图片数组 提交到后台中");
                        //  提交都成功了 重置页面
                        this.setData({
                            textVal: "",
                            clear: true
                        });
                        this.ChooseImgs = [];
                        // 返回上一个页面
                        wx.navigateBack({
                            delta: 1
                        });
                    }
                },
                fail: (err) => {
                    console.log(err);
                },
                complete: (res) => {
                    console.log(res);
                    wx.hideLoading();
                    this.setData({
                        textVal: "",
                        clear: true
                    });
                    this.ChooseImgs = [];
                }
            })
        });
    }
})
